<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" @select="selectMenu"
        default-active="2" text-color="#fff">

        <el-sub-menu index="1" v-for="menu in menuList">
            <template #title>
                <span>{{ menu.menuName }}</span>
            </template>
            <el-menu-item index="/home/user">用户管理</el-menu-item>
            <el-menu-item index="/home/menu">菜单管理</el-menu-item>
            <el-menu-item index="/home/role">角色管理</el-menu-item>
        </el-sub-menu>

        <!-- <el-sub-menu index="2">
            <template #title>
                <span>基础信息管理</span>
            </template>
            <el-menu-item index="/home/dept">部门管理</el-menu-item>
            <el-menu-item index="/home/constants_type">常数项类型管理</el-menu-item>
            <el-menu-item index="/home/regist_level">挂号级别管理</el-menu-item>
            <el-menu-item index="/home/regist_level">挂号级别管理</el-menu-item>
        </el-sub-menu> -->

    </el-menu>
</template>

<script setup lang="ts" name='SysMenu'>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router'
import { usePermission } from '@/store/userpermission'
const permissionStrore = usePermission()



const menuList = ref([])
// import router from '@/router'

//获取Router对象
const router = useRouter();


function selectMenu(url: string) {
    console.log("url", url);
    router.push(url)
}


onMounted(() => {
    const menuList = permissionStrore.getMenus();
})



</script>

<style scoped></style>